<template>
	<view class="content">
		<u-field v-model="house.houseName" label="房型名称" placeholder="房型名称" />
		<u-field v-model="house.houseArea" label="房型面积m²" placeholder="请填写房型面积" />
		<u-field v-model="house.housePrice" type="number" label="房型价格" placeholder="请填写房型价格" />
		<u-field v-model="house.housePosition" label="区位" placeholder="请填写房型区位" />
		<u-field v-model="houseSaleTypeshow" label="发布类型" placeholder="请选择发布类型">
			<u-button size="mini" slot="right" type="success" @click="show1 = true">选择类型</u-button>
		</u-field>
		<u-field v-model="houseTypeshow" label="户型" placeholder="请选择户型">
			<u-button size="mini" slot="right" type="success" @click="show2 = true">选择户型</u-button>
		</u-field>
		<u-field v-model="house.houseDetailPosition" label="详细地址" placeholder="请填写详细地址" />
		<u-picker @confirm="confirm1" v-model="show1" mode="selector" :range="houseSaleTypese"></u-picker>
		<u-picker @confirm="confirm2" v-model="show2" mode="selector" :range="houseTypese"></u-picker>
		<u-field v-model="house.houseInfo" label="房型介绍" placeholder="请填写房型介绍" />
		<view>
			<view class="content">
				<g-upload ref='gUpload' :mode="imgList" @chooseFile='chooseFile' @imgDelete='imgDelete'
					:control='control' :columnNum="columnNum"></g-upload>
				<view class="imglistItem" @click="uploadImg" v-if="!control">
					<view class="uploadControl">外部控件</view>
				</view>
				<view>
					<view>
						<label>图片行个数：</label>
						<switch @change="switch2Change"></switch>
						<label>{{columnNum}}</label>
					</view>
				</view>
			</view>
			<view class="operate">
				<button type="primary" @click="submit">提交</button>
			</view>
		</view>

	</view>
</template>

<script>
	import gUpload from "@/components/g-upload/g-upload.vue"
	export default {
		components: {
			gUpload
		},
		created() {
			let user = uni.getStorageSync('user');
			this.house.housePubUserId = user.userId
		},
		data() {
			return {
				title: 'Hello',
				control: true,
				columnNum: 4,
				imgList: [],
				name: [],
				fileList: [],
				user: {},
				houseSaleTypeshow: "",
				show1: false,
				show2: false,
				houseTypeshow: '',
				houseSaleTypese: ["租房", "二手房", "新房", "商用房"],
				houseTypese: [
					"一室一厅一卫",
					"二室一厅一卫",
					"三室二厅一卫",
					"四室二厅二卫",
					"二室二厅一卫",
					"三室二厅二卫",
					"四室二厅二卫"
				],
				house: {
					houseArea: 0, //
					houseCity: "", //
					houseDetailPosition: "", //
					houseId: "", //
					houseImg: [],
					houseInfo: "",
					houseName: "", // 
					housePosition: "", //
					housePrice: 0, //
					// housePubTime: "", 
					housePubUserId: "", //
					houseSaleType: 0, //
					houseStatus: 0, //
					houseType: "", //
				},
				tempUrlList: [],
				tempUrlItem: [],
				action: 'http://www.zphsow.ltd:8081/api/fileManage/Images',
				showUploadList: false,
				// 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
				// 这里直接获取内部的lists变量即可
			}
		},
		onLoad() {
			house: {}
		},
		methods: {
			//点击上传控件上传
			uploadImg() {
				this.$refs.gUpload.uploadImg()
			},
			/*
			上传后返回的值：
			list：上传后图片数组
			v：返回当前上传图片的临时路径
			*/
			chooseFile(list, v) {
				this.tempUrlList = list
			},

			/*
			删除图片：
			list：删除返回删除后剩余的图片数组
			eq：返回删除的数组
			*/
			imgDelete(list, eq) {
				this.tempUrlList = list
			},

			//控件内外部切换
			switch1Change(e) {
				this.control = !this.control
			},

			//图片行个数切换
			switch2Change(e) {
				this.columnNum = this.columnNum == 3 ? '4' : '3'
			},

			/*
			执行上传服务：
			urlList：要上传的图片：数组类型
			*/
			// uploadFileToServe(urlList, house) {
			// 	console.log(house)

			// },

			confirm1(res) {
				this.houseSaleTypeshow = this.houseSaleTypese[res]
				this.house.houseSaleType = res[0]
				console.log(this.house.houseSaleType)
			},
			confirm2(res) {
				this.houseTypeshow = this.houseTypese[res]
				this.house.houseType = this.houseTypese[res]
			},
			submit() {
				var that = this
				var urlList = this.tempUrlList
				let house = that.house
				new Promise((resolve, reject) => {
					var that = this
					if (!urlList || urlList.length <= 0) {
						return
					};
					let imgList = []
					for (let i = 0; i < urlList.length; i++) {
						uni.uploadFile({
							url: 'http://www.zphsow.ltd:8081/api/fileManage/Images',
							filePath: urlList[i],
							name: 'file',
							success(uploadFileRes) {
								imgList.push(uploadFileRes.data)
							}
						});
					}
					imgList = imgList.join(";,")
					house.houseImg = imgList
					resolve(house)
				}).then((house) => {
					uni.request({
						url: "http://www.zphsow.ltd/api/house/insertHouse",
						method: "POST",
						data: JSON.stringify(house),
						success: (res) => {
							console.log(res)
						}
					})
				})
			}

		}
	}
</script>

<style>
	.content {
		padding: 40rpx;
	}

	/* 上传控件 */
	.uploadControl {
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		width: 130rpx;
		display: block;
		height: 130rpx;
		text-align: center;
		line-height: 130rpx;
		font-size: 30rpx;
		color: #888;
		background-color: #EEEEEE;
	}
</style>
